<template>
	<view>
		<!-- 骨架屏 -->
		<view class="list" v-if="isLoading">
			<view class="fixbg"></view>
			<Header :isShow='isShow' :title="title" style="color: white;"/>
			<view class="container">
				<scroll-view scroll-y="true" >
					<view class="list-head">
						<view class="list-head-img">
							<image style="background-color: #f7f7f7;"></image>
							<text style="background-color: #f7f7f7;"></text>
						</view>
						<view class="list-head-text">
							<view style="background-color: #f7f7f7;">
							</view>
							<view>
								<image style="background-color: #f7f7f7;" ></image>
								<text style="background-color: #f7f7f7;"></text>
							</view>
							<view style="background-color: #f7f7f7;">
							 
							</view>
							<view class="btn" style="background-color: #f7f7f7;">
							
							</view>
						</view>
					</view>
					<button open-type="share" class="list-share" style="background-color: #f7f7f7; opacity: 1;">
						
					</button>
					<view class="list-music">
						<view class="list-music-head">
							<view style="background-color: #f7f7f7; width: 80rpx; height: 80rpx; margin-right: 10rpx; border-radius: 50%;">
								<text></text>
							</view>
							<view style="background-color: #f7f7f7;width: 300rpx; height: 80rpx; border-radius: 20rpx;">
								<text ></text>
							</view>
							<view>
							</view>
						</view>
						<view class="list-body" >
							<view class="list-body-item" v-for="i in [1,2,3,4,5,6,7,8,9,0]" >
								<view class="item-song-index" style="background-color: #f7f7f7;height: 80rpx; width: 80rpx;top: 0rpx; right: 10rpx;left: 0;border-radius: 50%;">
									<text></text>
								</view>
								<view class="item-song-info" style="background-color: #f7f7f7; height: 80rpx;">
									<view class="item-song-info-name">
										<text></text>
									</view>
									<view class="item-song-info-player">
										
									</view>
								</view>
								<view class="item-song-icon" style="background-color: #f7f7f7;height: 80rpx; width: 80rpx;border-radius: 50%;top: 0;right: 10rpx;">
									<text class="iconfont"></text>
								</view>	
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 显示列表 -->
		<view class="list" v-if="!isLoading">
			<view class="fixbg" :style="{'background': 'url('+ playerListInfo.data.coverImgUrl +')'}"></view>
			<Header :isShow='isShow' :title="title" style="color: white;" :isPlay="2" />
			<view class="container">
				<scroll-view scroll-y="true" @scrolltolower="onReachScollBottom">
					<view class="list-head">
						<view class="list-head-img">
							<image :src="playerListInfo.data.coverImgUrl"></image>
							<text class="iconfont icon-yousanjiao">{{num}}</text>
						</view>
						<view class="list-head-text">
							<view>
								云音乐{{playerListInfo.data.name}}
							</view>
							<view>
								<image src="../../static/pic/logo.png" ></image>
								<text>网易云音乐</text>
							</view>
							<view @tap="toMsg(playerListInfo.data.id)">
								{{playerListInfo.data.description}} >
							</view>
						</view>
					</view>
					<button open-type="share" class="list-share">
						<text class="iconfont icon-fenxiang"></text>
						<text>分享给微信好友</text>
					</button>
					<view class="list-music">
						<view class="list-music-head" @tap="toPlayerMusic(originPlayerList[0].id)">
							<view>
								<text class="iconfont icon-bofang"></text>
							</view>
							<view>
								<text>播放全部</text>
							</view>
							<view>
								<text>(共{{playerListInfo.data.tracks.length}}首)</text>
							</view>
						</view>
						<view class="list-body" >
							<view class="list-body-item" 
							@tap="toPlayerMusic(item.id)"  
							v-for="(item, index) in playerList"
							:key="item.id" >
								<view class="item-song-index">
									<text>{{index + 1}}</text>
								</view>
								<view class="item-song-info">
									<view class="item-song-info-name">
										<text>{{item.name}}</text>
									</view>
									<view class="item-song-info-player">
										{{item.ar[0].name}} - {{item.al.name}}
									</view>
								</view>
								<view class="item-song-icon">
									<text class="iconfont icon-bofang_o"></text>
								</view>	
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {ref, reactive} from 'vue'
	import {onLoad} from '@dcloudio/uni-app';
	import Header from '@/components/header/index.vue'
	import {getPlayerList, getPlayerListInfo} from "@/common/api.js"
	import {useFormat} from '@/hooks/useFormat.js'
	import { useSaveList }from '@/store/index.js'
	
	
	export default{
		name: 'SongList',
		components:{ Header },
		setup() {
			// 状态
			let isShow = ref(true)
			let title = ref('歌单')
			let listId= ref(0)
			let num = ref("")
			let isLoading = ref(true)
			let playerListInfo = reactive({data:{}})
			let playerList = reactive([])
			let originPlayerList = reactive([])
			let ListNum = ref(19)
			const savePlayerList = useSaveList()
			let uid = ref('')
			
			// 方法
			// 跳转简介页面方法
			let toMsg = id => {
				uni.navigateTo({
					url:'../listInfo/listInfo?id=' + id
				})
			}
			
			// 跳转至个人歌手页面
			let toPlayerMusic = (id) => {
				uni.reLaunch({
					url:`../playerMusic/playerMusic?id=${id}&uid=${uid.value}`
				})
			}
			
			// 当滚动到底部方法（实现列表懒加载）
			let onReachScollBottom = () =>{
				if(ListNum.value >= originPlayerList.length){
					ListNum.value = originPlayerList.length
				}
				let a = ListNum.value
				ListNum.value += 20
				let List = originPlayerList.slice(a, ListNum.value)
				playerList.push(...List)
			}
			
			// 生命周期
			onLoad(async(data)=>{
				uid.value = data.id
				// 获取的列表
				const res = await getPlayerList(data.id)
				originPlayerList.push(...res)
				playerList.push(...res.slice(0 , ListNum.value)) 
				
				// 获取的列表信息
				const res1 = await getPlayerListInfo(data.id)
				playerListInfo.data = res1
				num.value = useFormat(res1.playCount)
				isLoading.value = false
				savePlayerList.saveList(res1.trackIds)
			})
			
			return{
				// 状态
				isShow,
				title,
				playerListInfo,
				playerList,
				originPlayerList,
				ListNum,
				num,
				listId,
				isLoading,
				uid,
				// 方法
				toMsg,
				onReachScollBottom,
				toPlayerMusic
			}
		}
	}
</script>

<style>
	.list-head{
		display: flex;
		margin: 30rpx;
	}
	.list-head-img{
		width: 264rpx;
		height: 264rpx;
		position: relative;
		border-radius: 10px;
		overflow: hidden;
		margin-right: 40rpx;
	}
	.list-head-img image{
		width: 100%;
		height: 100%;
	}
	.list-head-img text{
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		color: white;
	}
	.list-head-text{
		display: flex;
		flex-direction: column;
		width: 380rpx;
		color: white;
	}
	.list-head-text view:nth-child(1){
		font-size: 40rpx;
	}
	.list-head-text view:nth-child(2){
		position: relative;
		top:20rpx;
		height: 54rpx;
		line-height: 54rpx;
		color: #eee;
	}
	.list-head-text view:nth-child(2) image{
		width: 54rpx;
		height: 54rpx;
		border-radius: 100%;
	}
	.list-head-text view:nth-child(2) text{
		position: absolute;
		top:0;
		left: 80rpx;
	}
	.list-head-text view:nth-child(3){
		width: 370rpx;
		height: 62rpx;
		margin-top: 50rpx;
		font-size: 20rpx;
		color: #eee;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-share{
		margin: 0 auto;
		width: 330rpx;
		height: 74rpx;
		line-height: 74rpx;
		border-radius: 37rpx;
		border: none;
		color: white;
		font-size: 28rpx;
		opacity: 0.7;
		background-color: rgba(0, 0, 0, 0.4);
		margin-top: 10rpx;
	}
	.list-share text{
		margin-right: 16rpx;
	}
	.list-music{
		width: 100%;
		height: 100vh;
		margin-top: 40rpx;
		background-color: white;
		position: relative;
		border-radius: 70rpx;
		/* margin-bottom: 30rpx; */
	}
	.list-music-head{
		display: flex;
		position: absolute;
		top: 50rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.list-music-head :nth-child(1) text{
		font-size: 60rpx;
		margin-right: 40rpx;
	}
	.list-music-head :nth-child(2) text{
		font-size: 40rpx;
	}
	.list-music-head :nth-child(3){
		width: 200rpx;
		position: relative;
		left: 20rpx;
	}
	.list-music-head :nth-child(3) text{
		position: absolute;
		bottom: 10rpx;
		color: darkgray;
	}
	.list-body{
		width: 100%;
		background-color: white;
		position: absolute;
		top: 150rpx;
	}
	.list-body-item{
		height: 120rpx;
		width: 100%;
		position: relative;
	}
	.item-song-index{
		position: absolute;
		top: 43rpx;
		left: 35rpx;
		font-size: 34rpx;
		color: silver;
	}
	.item-song-info{
		width: 550rpx;
		height: 120rpx;
	
		position: absolute;
		left: 100rpx;
	}
	.item-song-info-name{
		width: 400rpx;
		height: 45rpx;
		margin-top: 10rpx;
		margin-left: 10rpx;
		font-size: 34rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.item-song-info-player{
		height:  36rpx;
		width: 530rpx;
		margin-top: 5rpx;
		margin-left: 10rpx;
		font-size: 26rpx;
		color: silver;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.item-song-icon{
		position: absolute;
		right: 30rpx;
		top: 20rpx;
	}
	.item-song-icon text{
		font-size: 80rpx;
		color: silver;
	}
</style>